.container {
  position: relative;
  height: 100%;
  width: 100%;
  /* Update font color variable so children are visible on primary colored
  background */
  --font-color: var(--rstudio-white);
}

/* Make sure that the selection outline isn't impossible to see due to the color
of the card */
.container[data-is-selected-node="true"]::before {
  outline: var(--selected-outline-base) var(--black);
}

.value_box {
  height: 100%;
  display: grid;
  grid-template-rows: 100%;
  padding: var(--size-md);
  gap: var(--size-md);
  overflow: auto;
  grid-template-columns: 3fr 7fr;
  grid-template-areas: "showcase content";
}

.value_box > * {
  min-width: 0;
}

.value_box.showcase_right {
  grid-template-columns: 7fr 3fr;
  grid-template-areas: "content showcase";
}

.container > * {
  min-width: 0;
}

.showcase {
  grid-area: showcase;
  padding: var(--size-sm);
}

.showcase svg {
  width: 100%;
  height: 100%;
}

.content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card_title {
  font-size: 1rem;
}

/* If we've got pure text inside the card value slot, make it big*/
.card_value span {
  font-size: 1.5rem;
}

.replace_showcase_btn {
  width: 100%;
  height: var(--height-sm);
}
